$(function() {
  //get elem
  let $url = $('input[type="text"]'),
      $btnSave = $('input[type="button"]'),
      $img = $('img'),
      $tmpImg = $('<img>');

  //load local storage image
  loadImage();
  $btnSave.click(() => {
    //load tmp image
    //跨域问题
    $tmpImg.attr('crossOrigin', 'anonymous');
    //validate url not empty, paddern
    $tmpImg.attr('src', $url.val());
  });
  $tmpImg.load(function() {
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');
    ctx.width = this.width;
    ctx.height = this.height;
    //fill tmp image canvas
    ctx.drawImage(this,0,0,can.width,can.height);
    //canvas output base64
  
    //save base64 local storage
    localStorage.setItem('img', can.toDataURL());
    loadImage();
  });
  function loadImage() {
    let strImg = localStorage.getItem('img');
    if(strImg) {
      $img.attr('src', strImg);
      $img.css({display: 'block'});
    } else {
      strImg = '';
      $img.css({display: 'none'})
    }
  }
});
